<template>
    <div class="container">
        <div class="top"></div>
        <div class="search">
            <van-search shape="round" background="red" placeholder="请输入搜索关键词" @search="search" v-model="keywords" />
        </div>
        <div class="carousel">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false" :height="200">
                <van-swipe-item v-for="banner in banners" :key="banner.id">
                    <img :src="banner.image" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="types">
            <van-grid :column-num="5">
                <van-grid-item v-for="type in types" :key="type.id" @click="clickType(type.id)">

                    <img :src="type.icon" alt="">
                    <p>{{ type.name }}</p>
                </van-grid-item>
            </van-grid>
        </div>
        <div class="typesandpros">
            <div class="typeandpros" v-for="typeandpros in typesandpros" :key="typeandpros.id">
                <h3>
                    <img src="../../assets/l-icon.png" alt="">
                    {{ typeandpros.name }}
                    <img src="../../assets/r-icon.png" alt="">
                </h3>
                <div class="pros" v-for="pro in typeandpros.products" :key="pro.id">
                    <p class="adress">本产品由{{ pro.supplier }}提供</p>
                    <img :src="pro.banner" alt="">
                    <p class="proname">{{ pro.name }}</p>
                    <p class="spec">规格：{{ pro.specs }}</p>
                    <p class="price">价格：￥<span>{{ pro.price }}</span></p>
                    <p class="btns">
                        <van-button round type="info" @click="$event => godetail(typeandpros.id, pro.id)"
                            color="orangered">查看详情</van-button>
                        <van-button round type="info" color="orangered">加入购物车</van-button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//导入发送请求的的函数
import { banner, getTypes, getTypesAndPros } from '../../request/request'

import Vue from 'vue';
import { Search } from 'vant';
import { Swipe, SwipeItem } from 'vant';
import { Grid, GridItem } from 'vant';
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Search);

export default {
    created() {
        banner().then(data => {
            this.banners = data
        })
        getTypes().then(data => {
            this.types = data
        })
        getTypesAndPros().then(data => {
            this.typesandpros = data
        })
    },
    data() {
        return {
            banners: [],
            types: [],
            typesandpros: [],
            keywords: ''
        }
    },
    methods: {
        godetail(typeid, proid) {
            this.$router.push({ path: '/prodetail', query: { typeid: typeid, proid: proid } })
        },
        search() {
            //跳转分类页
            this.$router.push({ path: '/types', query: { keywords: this.keywords } })
        },
        clickType(id) {
            // let index = this.typesandpros.findIndex(item => item.id == id);
            this.$router.push({ path: '/types', query: { typeid: id } })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    .top {
        height: 50px;
        background-image: url(../../assets/logo.png);
        background-color: #f00;
        background-size: 100% 100%;
    }

    .carousel {
        height: 200px;

        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;

            img {
                height: 200px;
                width: 100%
            }
        }
    }

    .types {
        font-size: 14px;

        .van-grid .van-grid-item img {
            height: 50px;
            width: 50px;
        }
    }

    .typesandpros {
        h3 {
            text-align: center;

            img {
                vertical-align: middle;
            }
        }

        .pros {
            border: 1px solid #ccc;
            margin: 10px;
            border-radius: 5px;
            padding: 10px;

            p {
                text-align: center;
            }

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }

            p.proname {
                font-weight: bold;
                font-size: 18px;
            }

            p.spec {
                color: #999;
            }

            p.price {
                color: #f00;

                span {
                    font-size: 20px;
                    font-weight: bold
                }
            }

            p.btns {
                display: flex;
                justify-content: space-around;

                .van-button {
                    width: 150px;
                }
            }
        }
    }


}
</style>
